import 'package:cook_dinner/config/include.dart';
import 'package:cook_dinner/pages/user_home/user_home.dart';
import 'package:flutter/material.dart';

const List<String> utensil = ['大碗', '打蛋器', '平底锅', '锅铲', '汤勺', '刀叉'];

class MenuTopView extends StatelessWidget {
  const MenuTopView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.only(
            left: 31.rpx,
            right: 30.rpx,
            bottom: 22.rpx,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Text(
                    '红烧肉',
                    style: TextStyle(
                        fontSize: 18.rpx, color: const Color(0xff19140E)),
                  ),
                  Image.asset(
                    'assets/images/group_star.png',
                    height: 20.rpx,
                  ),
                ],
              ),
              SizedBox(height: 9.rpx),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      SizedBox(width: 11.rpx),
                      Text(
                        '156.0万浏览    9.0万收藏',
                        style: TextStyle(
                            fontSize: 13.rpx, color: const Color(0xff808080)),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Image.asset(
                        'assets/images/timeb.png',
                        height: 20.rpx,
                        width: 20.rpx,
                      ),
                      SizedBox(width: 4.rpx),
                      Text(
                        '45分钟',
                        style: TextStyle(
                            fontSize: 14.rpx, color: const Color(0xff808080)),
                      ),
                      SizedBox(width: 13.rpx),
                      Image.asset(
                        'assets/images/fireb.png',
                        height: 20.rpx,
                        width: 20.rpx,
                      ),
                      SizedBox(width: 4.rpx),
                      Text(
                        '简单',
                        style: TextStyle(
                            fontSize: 14.rpx, color: const Color(0xff808080)),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.rpx),
          child: Container(
            width: double.infinity,
            height: 85.rpx,
            padding: EdgeInsets.only(left: 19.rpx, right: 30.rpx),
            margin: EdgeInsets.only(bottom: 18.rpx),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.rpx),
              color: const Color(0xffD3D2D8).withOpacity(0.3),
            ),
            child: Row(
              children: [
                Expanded(
                  child: InkWell(
                    onTap: () => AppTo.goto(context, AppPage.userHome),
                    child: Row(
                      children: [
                        Image.asset(
                          'assets/images/avartimg.png',
                          width: 68.rpx,
                          height: 68.rpx,
                        ),
                        SizedBox(width: 20.rpx),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                '地球美食搜索队',
                                style: TextStyle(
                                  fontSize: 16.rpx,
                                  color: const Color(0xff19140E),
                                ),
                              ),
                              SizedBox(height: 5.rpx),
                              Text(
                                '159菜谱 3w粉丝',
                                style: TextStyle(
                                  fontSize: 13.rpx,
                                  color: const Color(0xffADADAD),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                InkWell(
                  child: Container(
                    width: 78.rpx,
                    height: 31.rpx,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16.rpx),
                      color: const Color(0xffFF8D1A),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      '关注',
                      style: TextStyle(fontSize: 13.rpx, color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 28.rpx),
          child: Text(
            '选用上等的猪肉，经过切块、焯水等工序，使肉质更加鲜嫩，口感更加细腻。在经过一系列的炖煮和调味过程后，肉块饱满鲜美，入口即化，犹如融化在舌尖的幸福。',
            style: TextStyle(
              fontSize: 14.rpx,
              color: const Color(0xffD3D2D8),
            ),
          ),
        ),
      ],
    );
  }
}

class MenuTitle extends StatelessWidget {
  const MenuTitle({Key? key, this.title, this.addText, this.onTap})
      : super(key: key);
  final String? title;
  final String? addText;
  final onTap;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 30.rpx, right: 23.rpx),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            title ?? '',
            style: TextStyle(
              fontSize: 16.rpx,
              color: const Color(0xff19140E),
            ),
          ),
          InkWell(
            onTap: onTap ?? null,
            child: Text(
              addText ?? '',
              style: TextStyle(
                fontSize: 14.rpx,
                color: const Color(0xffFA8303),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class MenuCir extends StatelessWidget {
  const MenuCir({Key? key, this.img, this.name, this.num}) : super(key: key);

  final String? img;
  final String? name;
  final String? num;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: (HYSizeFit.screenWidth - 70.rpx) / 2,
      height: 52.rpx,
      padding: EdgeInsets.only(right: 27.rpx),
      margin: EdgeInsets.only(bottom: 16.rpx),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Image.asset(
            'assets/images/$img',
            width: 52.rpx,
            height: 52.rpx,
          ),
          SizedBox(width: 12.rpx),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      name ?? '',
                      style: TextStyle(
                        fontSize: 12.rpx,
                        color: const Color(0xff19140E),
                      ),
                    ),
                    SizedBox(height: 8.rpx),
                    Text(
                      num ?? '',
                      style: TextStyle(
                        fontSize: 12.rpx,
                        color: const Color(0xff808080),
                      ),
                    ),
                  ],
                ),
                Image.asset(
                  'assets/images/add.png',
                  width: 20.rpx,
                  height: 20.rpx,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
